import React, { useEffect, useState } from 'react'
import { getUserListFn } from '../../api/userLogin'

import { Table } from 'antd'



export default function User() {

    const [userList,setUserList] = useState([])

    // 当前页
    const [current,setCurrent] = useState(1)

    const columns = [
      {
        title: '序号',
        dataIndex: 'nickname',
        key: 'name',
        render(value,record,index){
          // value 就是dataIndex所取出来的值
          // record 整行数据，当前对象中所有内容都可以获取
          // index 当前的索引值
          return <span>{(current - 1) * 8 + index + 1}</span>
        }
      },
      {
        title: '用户名称',
        dataIndex: 'nickname',
        key: 'nickname',
      },
      {
        title: '手机号',
        dataIndex: 'tel',
        key: 'tel',
      },
      {
        title: '用户id',
        dataIndex:'userid',
        key:'userid'
      },
      {
        title: '验证码',
        dataIndex: 'telcode',
        key: 'telcode',
      }
    ]

  useEffect(()=>{
      getUserListFn().then(res=>{
          console.log(res.data)
          setUserList(res.data)
      })
  },[])

    return (
        <div>
            <h3>用户列表</h3>
            <Table 
                dataSource={userList}
                columns={columns}
                rowKey={'userid'}
                pagination={{
                    current,
                    pageSize:8,
                    onChange:(page)=>{
                        // 记录当前页
                        // console.log(page + 'qwertyuiop');
                        setCurrent(page)
                    }
                }}
            />
        </div>
    )
}
